<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ include file="../../base.jsp" %>
<!DOCTYPE html>
<html>

<head>
    <base href="${ctx}/">
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>黑马面面管理系统</title>
    <meta name="description" content="AdminLTE2定制版">
    <meta name="keywords" content="AdminLTE2定制版">
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 页面meta /-->
    <link rel="stylesheet" href="${ctx}/plugins/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="${ctx}/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script type="text/javascript" src="${ctx}/plugins/ztree/js/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" src="${ctx}/plugins/ztree/js/jquery.ztree.excheck-3.5.js"></script>

</head>

<body style="overflow: visible;">
<div id="frameContent" class="content-wrapper" style="margin-left:0px;height: 1200px" >
    <section class="content-header">
        <h1>
            菜单管理
            <small>菜单列表</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="all-admin-index.html"><i class="fa fa-dashboard"></i> 首页</a></li>
        </ol>
    </section>
    <!-- 内容头部 /-->

    <!-- 正文区域 -->
    <section class="content">

        <!-- .box-body -->
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">角色 [${role.name}] 权限列表</h3>
            </div>
            <div class="box-body">
                <!-- 数据表格 -->
                <div class="table-box">
                    <!-- 树菜单 /-->
                    <ul id="treeDemo" class="ztree"></ul>
                    <!--工具栏-->
                    </form>
                    <div class="box-tools text-left">
                    <button type="button" class="btn bg-maroon" id="authorBtn">保存</button>
                    <button type="button" class="btn bg-default" onclick="history.back(-1);">返回</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<%--查询树--%>
<script>
    $(function () {
        //发送异步请求，请求树需要的数据
        $.get('${pageContext.request.contextPath}/system/role/findAuthorByRoleId',{
            roleId:"${role.id}"
        },function (data) {
            //配置
            var setting = {
                check: {
                    enable: true,//启用复选框
                    chkboxType: {"Y": "ps", "N": "ps"}//子被选中父也被选中，父被选中，所有的子都被选中
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                }
            };
            //第一个参数为zTree的DOM容器，第二个为zTree设置详情可见官网api,第三个为zTree的节点数据,expandAll(true)表示默认展开树
            $.fn.zTree.init($("#treeDemo"), setting, data).expandAll(true);

            console.log(1);

        });
    });
</script>
<%--保存权限--%>
<script>
    $(function () {

        console.log(1);
        $("#authorBtn").on('click',function () {
            let roleId = '${role.id}';//角色ID
            var arr = $.fn.zTree.getZTreeObj("treeDemo").getCheckedNodes();//treeDemo是ztree树的ID值


            let moduleIds = '';
            $(arr).each(function (index,element) {
                moduleIds+=element.id+","
            });

            $.post('${pageContext.request.contextPath}/system/role/authorize',{
                "roleId":roleId,
                "moduleIds":moduleIds
            },function (resp) {
                if(resp=="true"){
                    alert("授权成功");
                }else{
                    alert("授权失败")
                }
            })
        });
    });
</script>
</body>
</html>